<template>
    <view>
        <view class="pb-4">
            <text class="h8 font-weight-600 text-primary">预约中的服务</text>
        </view>
        <swiper class="AppointmentService" next-margin="120rpx" previous-margin="120rpx">
            <swiper-item class="swiper-item" v-for="(item, index) in AppointmentService" :key="item.id">
                <view class="swiper-item-body" :class="{ 'timeout': item.timeout }"
                    @tap="$page.open('/technician/pages/user/service/details?id=' + item.id)">
                    <view class="flex flex-x-space-between">
                        <view class="flex flex-center grid-gap-2">
                            <image :src="item.headimg" class="rounded-round" style="width: 20px;height: 20px;" />
                            <text class="h10">{{ item.nickname }}</text>
                        </view>
                        <view class="h10">{{ item.title }}</view>
                    </view>
                    <x-countdown class="time" v-if="item.countdown" :time="item.time" :end-text="item.end_text"
                        @end="getList" />
                    <view class="time" v-else>{{ item.time }}</view>
                </view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue';
import { useUserStore } from "@/stores";
import { $api, $func, $page } from "@/utils";
const AppointmentService = ref([]);
const UserStore = useUserStore();
const emit = defineEmits(['loaded', 'update:show']);
const getList = () => {
    if (UserStore.hasLogin()) {
        $api.AppointmentService.technician().then((data: any) => {
            initData(data)
            emit('update:show', true)
        }).catch(() => {
            AppointmentService.value = [];
            emit('update:show', false)
        })
    }
}
const initData = (e: any) => {
    let data: any = [];
    for (let i = 0; i < e.length; i++) {
        let item = e[i];
        const start_time_date = new Date(item.start_time.replace(/-/g, '/'));
        const date = new Date;
        item.timeout = false;
        item.countdown = false;
        switch (item.state) {
            // 待服务
            case 1:
                if (start_time_date < date) {
                    item.timeout = true;
                }
                item.time = `${$func.getDayName(start_time_date)} ${start_time_date.getHours().toString().padStart(2, '0')}:${start_time_date.getMinutes().toString().padStart(2, '0')}`;
                break;
            // 已出发
            case 2:
                start_time_date.setMinutes(start_time_date.getMinutes() + item.commuting_duration);
                item.time = (start_time_date.getTime() - date.getTime()) / 1000;
                item.countdown = true;
                item.end_text = '超时一小时以上';
                if (item.time <= 0) {
                    item.timeout = true;
                }
                break;
            // 已到达
            case 3:
                if(item.to_shop){
                    item.time = '待核验';
                    if (item.verification) {
                        item.time = '已核验';
                    }
                }else{
                    item.time = '已达到';
                    if (item.verification) {
                        item.time = '已到达(已核验)';
                    }
                }
                break;
            // 进行中
            case 4:
                const service_start_time = new Date(item.service_start_time.replace(/-/g, '/'));
                const service_end_time = service_start_time;
                service_end_time.setMinutes(service_end_time.getMinutes() + item.duration);
                item.time = (service_end_time.getTime() - date.getTime()) / 1000;
                item.end_text = '服务结束';
                item.countdown = true;
                break;
        }
        data.push(item);
    }
    AppointmentService.value = data;
    nextTick(() => {
        emit('loaded')
    })
}
onMounted(() => {
    getList();
})
defineExpose({
    getList
})
</script>

<style lang="scss" scoped>
.AppointmentService {
    height: 160rpx;

    .swiper-item {
        box-sizing: border-box;
        padding: 0 20rpx;
    }

    .swiper-item-body {
        height: 100%;
        box-sizing: border-box;
        padding: 20rpx;
        border-radius: 10rpx;
        display: flex;
        flex-direction: column;
        background: linear-gradient(45deg, var(--xl-primary), var(--xl-primary-light-3));
        color: #FFFFFF;

        .time {
            flex: 1;
            font-size: 40rpx;
            font-weight: 600;
            padding: 20rpx;
            text-align: center;
        }

        &.timeout {
            background: linear-gradient(45deg, var(--xl-danger), var(--xl-danger-light-2));
        }
    }
}
</style>
